<template>
  <div>
    <Card title="客户信息">
      <el-form size="small" inline label-width="120px" :model="formA">
        <el-form-item label="客户名称">
          <el-input v-model="formA.valA"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" @click="hanleClick"
            >选取客户</el-button
          >
        </el-form-item>
        <el-form-item label="客户编码">
          <el-input v-model="formA.valB"></el-input>
        </el-form-item>
        <el-form-item label="客户经理名称">
          <el-input v-model="formA.valC"></el-input>
        </el-form-item>
        <el-form-item label="客户经理电话">
          <el-input v-model="formA.valD"></el-input>
        </el-form-item>
      </el-form>
    </Card>
    <Card title="产品选择">
      <el-checkbox-group v-model="checkedValA" :max="2">
        <el-checkbox
          v-for="item in valGroupA"
          :label="item"
          :key="item"
          :disabled="item === '省内互联网专线'"
        >
          {{ item }}
        </el-checkbox>
      </el-checkbox-group>
      <section v-if="checkedValA.length !== 0" style="margin-top: 20px">
        <Card title="虚拟号云视讯" v-if="checkedValA.includes('虚拟号云视讯')">
          <div slot="cRight" style="display: flex">
            <el-button type="primary" size="small" style="margin-right: 10px">
              <a href="http://119.23.15.173/down/Model.xlsx"> 模板下载 </a>
            </el-button>
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-change="onChangeA"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </div>
          <Table :tableData="tableDataA"></Table>
        </Card>
        <Card
          title="省内互联网专线"
          v-if="checkedValA.includes('省内互联网专线')"
        >
          <div slot="cRight" style="display: flex">
            <el-button type="primary" size="small" style="margin-right: 10px">
              <a href="http://119.23.15.173/down/Model.xlsx"> 模板下载 </a>
            </el-button>
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-change="onChange"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </div>
          <Table :tableData="tableData"></Table>
        </Card>
      </section>
    </Card>
    <Card title="账务信息">
      <el-form size="small" inline label-width="120px" :model="formB">
        <el-form-item label="到期生效规则">
          <el-input v-model="formB.valA"></el-input>
        </el-form-item>
        <el-form-item label="支付模式">
          <el-input v-model="formB.valB"></el-input>
        </el-form-item>
        <el-form-item label="支付账户">
          <el-input v-model="formB.valC"></el-input>
        </el-form-item>
      </el-form>
    </Card>
  </div>
</template>

<script>
import Card from '@/components/Card'
import Table from '@/components/Table'
export default {
  components: {
    Card,
    Table
  },

  data() {
    return {
      formA: {
        valA: '',
        valB: '',
        valC: '',
        valD: ''
      },
      formB: {
        valA: '',
        valB: '',
        valC: ''
      },
      checkedValA: ['省内互联网专线'],
      valGroupA: ['虚拟号云视讯', '固话云视讯', '省内互联网专线'],
      tableData: {
        col: [
          {
            prop: 'colA',
            label: '序号'
          },
          {
            prop: 'colB',
            label: '办理部门'
          },
          {
            prop: 'colC',
            label: '接入协议'
          },
          {
            prop: 'colD',
            label: '最大延时'
          },
          {
            prop: 'colE',
            label: '最大兆宽'
          },
          {
            prop: 'colF',
            label: '操作',
            type: 'Button',
            btnList: [{ label: '复制' }, { label: '删除' }]
          }
        ],
        row: []
      },
      tableDataA: {
        col: [
          {
            prop: 'colA',
            label: '序号'
          },
          {
            prop: 'colB',
            label: '云视讯号码'
          },
          {
            prop: 'colC',
            label: '号码归属省'
          },
          {
            prop: 'colD',
            label: '号码归属市'
          },
          {
            prop: 'colE',
            label: '产品资费'
          },
          {
            prop: 'colF',
            label: '操作',
            type: 'Button',
            btnList: [{ label: '复制' }, { label: '删除' }]
          }
        ],
        row: []
      }
    }
  },

  methods: {
    hanleClick() {
      this.$emit('hanlePer', true)
    },
    onChange() {
      this.tableData.row = [
        {
          colA: '3857',
          colB: '市场部',
          colC: 'CMPP3.0',
          colD: '100MS',
          colE: '300'
        },
        {
          colA: '3858',
          colB: '市场部',
          colC: 'CMPP3.0',
          colD: '100MS',
          colE: '400'
        }
      ]
    },
    onChangeA() {
      this.tableDataA.row = [
        {
          colA: '3857',
          colB: '210000006',
          colC: '上海',
          colD: '上海',
          colE: '功能费：100元/月'
        },
        {
          colA: '3858',
          colB: '210000004',
          colC: '上海',
          colD: '上海',
          colE: '功能费：86元/月'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
a {
  text-decoration: none;
  color: #ffffff;
}
</style>
